const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
require("@babel/polyfill")
module.exports = {
  mode: "development",
  entry: {
    index: "./src/js/index.js",
    b: "./src/js/b.js",
    a: "./src/js/a.js",
  },
  devServer: {
    port: 8080,
    open: true,
    progress: true,
    contentBase: "./dist",
    compress: true,
    hot: true,
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  devtool:'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          output: null,
          toplevel: false,
          nameCache: null,
          ie11: false,
          sourceMap:true
        },
      }),
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/view/index.html",
      filename: "index.html",
      chunks: ["index", "vendor"],
      hash: true,
    }),
    new HtmlWebpackPlugin({
      template: "./src/view/b.html",
      filename: "b.html",
      chunks: ["b", "vendor"],
      hash: true,
    }),
    new HtmlWebpackPlugin({
      template: "./src/view/a.html",
      filename: "a.html",
      chunks: ["a", "vendor"],
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use:{
          loader:"html-loader",
        },
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10*1024,
              name: "[hash:6][name].[ext]",
              outputPath: "images/",
              publicPath: "../images",
            },
          },
        ],
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: { //用babel-loader es6->es5
            presets: [//预设
              '@babel/preset-env'//包含将es6转es5的模块
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", {//装饰器
                "legacy": true//宽松模式
              }],
              ["@babel/plugin-proposal-class-properties", {//转换class
                "loose": true
              }],
              "@babel/plugin-transform-runtime"//可以转化更高级的es语法,例如generator语法
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),//只转化src下的
        exclude: /node_modules/,//忽略node_modules文件夹
      },
    ],
  },
};
